<template>
  <div id="myChart" :style="{width: '1000px', height: '600px'}"></div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'echarts',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        yAxisData:[],
        visitedData:[],
        downloadData:[],
      }
    },
    mounted(){
      this.drawLine()
      this.getDataFromMongoMusic()
    },
    methods: {
      drawLine(){

        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '歌曲访问量/下载量排行',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['访问量', '下载量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: this.yAxisData
          },
          series: [
            {
              name: '访问量',
              type: 'bar',
              data: this.visitedData
            },
            {
              name: '下载量',
              type: 'bar',
              data: this.downloadData
            }
          ]
        });
      },
      getDataFromMongoMusic(){
        axios.get("http://127.0.0.1:8100/findAllMongoMusic").then(res=>{
            if(res.data!=null){
              for (let i=0;i<res.data.length;i++){
                  console.log(res.data[i].name)
                  this.yAxisData.push(res.data[i].name)
                  this.visitedData.push(parseInt(res.data[i].visitQuantity))
                  this.downloadData.push(parseInt(res.data[i].downloadQuantity))
              }

            }
            this.drawLine()
        })
      }
    }
  }
</script>

<style scoped>

</style>
